import { useMemo } from "react";

const Demo4 = () => {

  // useMemo： 它在每次重新渲染的时候能够   缓存计算的结果。 （缓存值）
 

  const fn = () => {
    console.log('fn 函数 计算 1 + 2 + 3')
    return  1 + 2 + 3
  }

  const fnMemo = useMemo(() => {
    console.log('useMemo 函数 计算 1 + 2 + 3')
    return  1 + 2 + 3
  }, [])

  return (
    <div>
      <h1>Demo4</h1>
      <h3>{fn()}</h3>
      <h3>{fn()}</h3>
      <h3>{fn()}</h3>
      <hr />
      <h3>{fnMemo}</h3>
      <h3>{fnMemo}</h3>
      <h3>{fnMemo}</h3>
    </div>
  );
};

export default Demo4;